<template>
  <view class="container">
    <!-- 标题栏 -->
  <!--  <view class="header">
      <text class="title">我的收藏</text>
    </view> -->
    
 <view class="section" style="padding-bottom: 100rpx;">
       <view class="section-header">
         <text class="section-title" style="text-align: center;">我的赞过</text>
       </view>
       <view class="recommend-grid">
         <view 
           class="recommend-item" 
           v-for="(item, index) in recommendList" 
           :key="index"
           @click="handleRecommendClick(item)"
         >
           <!-- 图片 -->
           <image 
             class="item-image" 
             :src="item.image" 
             mode="aspectFill"
           ></image>
           
           <!-- 内容区域 -->
           <view class="item-content">
             <text class="item-title">{{item.title}}</text>
             <view class="item-footer">
               <!-- 作者信息（添加头像） -->
               <view class="author-info">
                 <image 
                   class="author-avatar" 
                   :src="item.avatar" 
                   mode="aspectFill"
                 ></image>
                 <text class="item-author">{{item.author}}</text>
               </view>
               
               <!-- 点赞区域 -->
               <view class="like-container" @click.stop="toggleLike(item)">
                 <image 
                   class="like-icon" 
                   :src="item.liked ? '/static/liked.png' : '/static/like.png'"
                 ></image>
                 <text class="like-count">{{formatLikeCount(item.likeCount)}}</text>
               </view>
             </view>
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    recommendList: [
            {
              id: 1,
              image: '/static/shouye1.png',
              title: '上班试试不一样的风格，',
              author: '柴分甜',
              avatar: '/static/shouye1.png',
              likeCount: 1560,
              liked: false
            },
            {
              id: 2,
              image: '/static/shouye1.png',
              title: '这感觉……只有女生才',
              author: '七七早安Iris',
              avatar: '/static/shouye1.png',
              likeCount: 48000,
              liked: true
            },
            {
              id: 3,
              image: '/static/shouye1.png',
              title: '打卡公基常识了！！！',
              author: '公基常识',
              avatar: '/static/shouye1.png',
              likeCount: 118,
              liked: false
            },
            {
              id: 4,
              image: '/static/shouye1.png',
              title: '郵都的正确读音？',
              author: '胖兔兔',
              avatar: '/static/avatar4.jpg',
              likeCount: 427,
              liked: false
            },
    		   {
    		     id: 5,
    		     image: '/static/shouye1.png',
    		     title: '郵都的正确读音？',
    		     author: '胖兔兔',
    		     avatar: '/static/avatar4.jpg',
    		     likeCount: 427,
    		     liked: false
    		   },
    		   {
    		     id: 6,
    		     image: '/static/shouye1.png',
    		     title: '郵都的正确读音？',
    		     author: '胖兔兔',
    		     avatar: '/static/avatar4.jpg',
    		     likeCount: 427,
    		     liked: false
    		   }
          ]
    }
  },

  methods: {
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}`
      });
    },
	handleRecommendClick(item) {
	   uni.navigateTo({
	   	url:'/pages/comment/comment'
	   })}
  }
}
</script>

<style lang="scss">
.container {
  // padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  padding: 15px 0;
  
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}

.recommend-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}

/* 推荐项样式 */
.recommend-item {
  width: 48%;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 图片样式 */
.item-image {
  width: 100%;
  height: 200px;
}

/* 内容区域样式 */
.item-content {
  padding: 8px;
}

.item-title {
  font-size: 14px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  line-height: 1.4;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 作者信息样式 */
.author-info {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 5px;
}

.item-author {
  font-size: 12px;
  color: #999;
}

/* 点赞区域样式 */
.like-container {
  display: flex;
  align-items: center;
}

.like-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
}

.like-count {
  font-size: 12px;
  color: #999;
}
</style>